<template>
    <view class="ctn">
        <view class="title">
            <text class="title-right"> 零钱理财 </text>
            <text class="title-left"> 超500,000+人购买 </text>
        </view>
        <view class="title-last">
            收益稳健，轻松理财;申赎灵活，使用方便;严控风险,
            省心之选;精品热销，先到先得
        </view>
        <view class="nav">
            <image
                src="../../static/financialImg/logo.png"
                class="logo"
            ></image>
            <text class="nav-first">为您甄别</text>
            <text class="nav-two">活期精品</text>
        </view>
        <financialProducts class="component-product" :bottom="num"></financialProducts>

    </view>
</template>

<script>
import financialProducts from "../../components/financialProducts/financialProducts.vue";
export default {
    components: {
        financialProducts,
    },
    data() {
        return {
			num:1
		};
    },
	onReachBottom(){
		this.num++
	}
   
};
</script>

<style lang="scss" scoped>
$font-color: #999999;
$font-size: 24rpx;
$font-size-ctn: 28rpx;
$title-font-size: 48rpx;
$border-raduis: 10rpx;

@mixin fontSize {
    font-size: 28rpx;
    color: #999999;
}

@mixin border {
    border: 1px solid red;
}

@mixin flexRow {
    display: flex;
    align-items: center;
}

.ctn {
    padding: 60rpx 20rpx 31rpx 20rpx;

    .title {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        margin-bottom: 40rpx;

        // @include border();
        .title-right {
            font-size: $title-font-size;
            color: #333333;
            font-weight: bold;
        }

        .title-left {
            font-size: $font-size;
            color: $font-color;
        }
    }

    .title-last {
        @include fontSize();
        line-height: 48rpx;
        margin-bottom: 40rpx;
    }

    .nav {
        // @include border();
        @include flexRow();
        position: relative;
        color: #f86464;
        background-image: url(../../static/financialImg/navbg.png);
        background-size: cover;
        background-position-x: 22rpx;
        font-size: $font-size;
        height: 60rpx;
        border-radius: $border-raduis;
        margin-bottom: 40rpx;

        .logo {
            position: absolute;
            width: 60rpx;
            height: 60rpx;
        }

        .nav-first {
            margin: 0 20rpx 0 74rpx;
        }
    }
}
</style>
